'use client'

import { useState } from 'react'

interface PasswordFormProps {
  userId: string
  onClose: () => void
  isReset?: boolean
}

export default function PasswordForm({ userId, onClose, isReset = false }: PasswordFormProps) {
  const [oldPassword, setOldPassword] = useState('')
  const [newPassword, setNewPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [error, setError] = useState('')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    
    if (newPassword !== confirmPassword) {
      setError('新密码与确认密码不匹配')
      return
    }

    try {
      const response = await fetch(`/api/users/${userId}/password`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          oldPassword: isReset ? null : oldPassword,
          newPassword,
          isReset
        }),
      })

      if (response.ok) {
        //修改成功
        alert('修改密码成功')
        onClose()
      } else {
        const data = await response.json()
        setError(data.error)
      }
    } catch (error) {
      setError('修改密码失败，请重试')
    }
  }

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
      <div className="bg-gray-900 p-6 rounded-lg w-full max-w-md border border-gray-700">
        <h2 className="text-xl font-semibold mb-4 text-white">
          {isReset ? '重置密码' : '修改密码'}
        </h2>
        
        {error && (
          <div className="text-red-400 mb-4 text-center">{error}</div>
        )}

        <form onSubmit={handleSubmit} className="space-y-4">
          {!isReset && (
            <div>
              <label className="block mb-1 text-gray-200">当前密码</label>
              <input
                type="password"
                value={oldPassword}
                onChange={(e) => setOldPassword(e.target.value)}
                className="w-full p-2 border rounded bg-gray-800 text-white border-gray-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
                required
              />
            </div>
          )}
          
          <div>
            <label className="block mb-1 text-gray-200">新密码</label>
            <input
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              className="w-full p-2 border rounded bg-gray-800 text-white border-gray-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
              required
            />
          </div>

          <div>
            <label className="block mb-1 text-gray-200">确认新密码</label>
            <input
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              className="w-full p-2 border rounded bg-gray-800 text-white border-gray-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
              required
            />
          </div>

          <div className="flex justify-end space-x-2">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 border border-gray-700 rounded text-gray-200 hover:bg-gray-800"
            >
              取消
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
            >
              确认
            </button>
          </div>
        </form>
      </div>
    </div>
  )
} 